<template lang="html">
  <div class="tabs-container">
    <ul class="tabs">
      <v-tab-item
        v-for="item in tabs"
        :active="ACTIVE_INDEX === item.index"
        :key="item.index"
        @click="ACTIVE_INDEX = item.index"
      >
        {{ item.label }}
      </v-tab-item>
    </ul>

    <div class="panels">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import vTabItem from './tab-item.vue'

export default {
  components: {
    vTabItem
  },
  props: {
    activeIndex: { type: String, default: '' }
  },

  data () {
    return {
      ACTIVE_INDEX: this.activeIndex,
      tabs: []
    }
  },

  methods: {
    netxtId () {
      return ++this.idCounter
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  width: 1200px;
  height: 60px;
  padding: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
